<template>
  <div >
    <div v-for="page in pages" :key="page">
      <!-- 分页 -->
      <div class='tab_company_out'>
        <div style="float: right;margin-right: 20px" >No:{{tableData.orderNo}}</div>
        <div class="title">{{tableData.companyName}}<span style="padding-left: 10px" v-if="tableData.orderType==1&&tableData.delivery==2">认款发货单</span><span style="padding-left: 10px" v-if="tableData.orderType==1&&tableData.delivery==1">发货单</span><span style="padding-left: 10px" v-if="tableData.orderType==2">退货单</span><span style="padding-left: 10px" v-if="tableData.orderType==3">补货单</span></div>
        <div class='dan'><span></span></div>
        <div style="width:770px;padding-top:5px">
          <span class="left" style="float:left;width:320px;text-align:left">生产厂家：{{tableData.supplierName}}</span>
          <span style="margin-left:-225px;">部门: {{tableData.deptName}}</span>
          <span class="right" style="float:right;text-align:right">{{tableData.deliveryTitle}}: {{tableData.deliveryValue}}</span>
        </div>
        <p style="width:770px;">
          <span class="left" style="float:left;width:320px;text-align:left">客户名称：{{tableData.customName}}</span>
          <span style="margin-left:-160px;">发票方式: {{tableData.sendType}}</span>
          <span class="right" style="float:right;text-align:right">发货日期: {{tableData.sendDate}}</span>
        </p>

        <table cellpadding='0' cellspacing='0' style="width:770px;float: left;margin-bottom: 8px">
          <tr style="text-align: center">
            <th width='5%'>序号</th>
            <th width='32%'>商品名称</th>
            <th width='12%'>规格</th>
            <th width='7%'>数量</th>
            <th width='10%'>单价</th>
            <th width='10%'>金额</th>
            <th width='12%'>回款金额</th>
            <th width='12%'>回款日期</th>
          </tr>
          <!-- 每页显示onePageRow条数据 -->
          <tr v-for="(row,index) in tableData.orderDetails" :key="index">
            <td>{{(page-1)*onePageRow + index + 1}}</td>
            <td>{{row.drugsName}}</td>
            <td>{{row.drugsSpec}}</td>
            <td>{{row.saleNum}}</td>
            <td>{{row.salePrice}}</td>
            <td>{{row.saleAmount}}</td>
            <td :rowspan="tableData.orderDetails.length" v-if="index==0">{{tableData.takeAmount}}</td>
            <td :rowspan="tableData.orderDetails.length" v-if="index==0">{{tableData.takeDate}}</td>
          </tr>
          <!-- 插入空白行 -->
          <template v-if="blankLines===true && tableData.orderDetails.length<5">
            <tr v-for="d in (4-tableData.orderDetails.length)" :key="`_${d}_`">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </template>
          <tr v-if="page==pages">
            <td>合计</td>
            <td colspan='3' class="value">{{chineseTotal}} ¥{{tableData.takeAmount}}</td>
            <td>回款银行</td>
            <td colspan="4" class="value">{{tableData.bankName}}</td>
          </tr>
          <tr v-else>
            <td>合计</td>
            <td colspan='3'>(合计打印到最后一页)</td>
            <td id='total'></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan='8' class="value">{{tableData.remark}}</td>
          </tr>
        </table>
        <div class="text" style='margin-top: -55px'>白联销售┄红联结算┄黄联财务</div>
        <ul class='lu'>
          <li>申请人：
            <label>{{tableData.nickName}}</label>
          </li>
          <li>部门经理：
            <label>{{tableData.nickName_nqbz}}</label>
          </li>
          <li>会计：
            <label>{{tableData.nickName_kj}}</label>
          </li>
          <li>财务：
            <label>{{tableData.nickName_cwbz}}</label>
          </li>
<!--          <li>营销总监：-->
<!--            <label></label>-->
<!--          </li>-->
          <li>总经理：
            <label>{{tableData.nickName_zjl}}</label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'OrderPrint',
    // 制作打印模版组件时，props区域尽量保留。
    props: {
      // 接受的打印数据
      tableData: {
        type: Object,
        default() {
          return {
            orderNo: '',
            supplierName: '',
            deptName:'',
            customName:'',
            orderType:'',
            sendDate: '',
            sendType:'',
            delivery:'',
            takeAmount: 0,
            bankName:'',
            orderDetails: [
              {
                drugsName: '',
                item_unit: '40ML',
                drugsSpec: '',
                saleName: 0,
                salePrice: 0,
                saleAmount: 0,
                item_total: 5 * 188,
                item_total_pv: 5 * 150
              }
            ]
          }
        }
      },

      // 每页多少行
      onePageRow: {
        type: Number,
        default: 5
      },
      // 是否插入空白行
      blankLines: {
        type: Boolean,
        default: true
      },
      getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
    },
    data() {
      return {}
    },
    created() {

    },
    computed: {
      pages() {
        // 求当前数据能打印的页数
        let pages_ = Math.ceil(this.tableData.orderDetails.length / this.onePageRow) // 向上取整数
        return pages_ <= 0 ? 1 : pages_
      },
      chineseTotal() {
        // 计算中文合计，如果忘记传入
        return this.getChineseNumber != null ? this.getChineseNumber(this.tableData.takeAmount) : '您还没有传入getChineseNumber'
      }
    },

    methods: {
      computePageMoney(arr) {
        let sum = 0
        arr.forEach((item) => {
          sum += Number(item.goodsTotalMoney)
        })
        return sum
      }
    }
  }
</script>
<style scoped>
  * {
    padding: 0;
    margin: 0;
    font-color:#000000;
    color: #000000;
    list-style-type: none;
    font-family: "微软雅黑";
    font-size: 14px;
  }

  @page {
    size: auto;
    margin: 1mm;
  }
  .text{
    float: right;
    letter-spacing:1px;
    font-size: 7px;
    width: 12px;
  }
  .tab_company_out {
    text-align: center;
    width: 790px;
    page-break-after: always;
  }

  .value {
    text-align: left;
    width: 100px;
    padding-left: 10px;
  }

  .title {
    font-size: 17px;
    padding-left: 16%;
    font-weight: bold;
  }

  .dan {
    text-align: center;
    position: relative;
  }


  .dan span {
    position: absolute;
    right: 0;
  }

  p {
    overflow: hidden;
    padding: 10px 0;
  }


  p span ins {
    text-decoration: underline;
  }

  table {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
  }

  table tr td {
    border: 1px solid #000;
    border-bottom: none;
    border-right: none;
    height: 28px;
    text-align: center;
    line-height: 28px;
  }

  table tr td:last-of-type,
  table tr th:last-of-type {
    border-right: 1px solid #000;

  }

  table tr th {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
  }

  table tr th:nth-child(2) {
    width: 0;
  }

  .lu{
    padding-left: 10px;
  }

  .lu li {
    float: left;
    text-align: left;

    width: calc(765px / 5);

  }

  .lu li label {
    width: 70px;
    display: inline-block;
  }


  /*.lu li:last-of-type {*/
  /*margin-right: 20px;*/
  /*float: right;*/
  /*text-align: left;*/
  /*}*/


</style>